<template>
    <div class="bar-topic">
      <div class="index-content-bar">
        <!--选项区域-->
        <div class="communityDiv">
          <el-tabs @tab-click="setCommunityId">
            <el-tab-pane v-for="item in communityData" :key="item.index" :label="item.communityName" :name="item.communityId" />
          </el-tabs>
          <div v-loading="loading" element-loading-text="暂时没文章哦~">
            <div v-for="item in postData">
              <div>
                <div style="display: inline-block;width: 330px;height: 80px;">
                  <div class="titleDiv" @click="articleTitle(item.articleId)">
                    <h4>{{ item.articleTitle }}</h4>
                  </div>
                  <br>
                  <br>
                  <div style="font-size: 10px">
                    <div class="el-icon-user" />
                    {{ item.users.usersName}}
                    <div class="el-icon-timer" />
                    <TimeDisposal :date="item.articleCreatingTime" />
                  </div>
                </div>
                <el-image :src="item.articleFirstImage" style="display: inline-block;width: 150px;height: 90px;margin-left: 100px" />
              </div>
              <el-divider />
              <br>
            </div>
          </div>
        </div>
        <!--选项区域选择后子组件显示此处-->
      </div>
    </div>
</template>

<script>
import request from "../../../utils/request";
import TimeDisposal from "../../../components/timeDisposal";
import {gotoNewWindow} from "../../../utils/sameMethod";

export default {
  components:{
    TimeDisposal
  },
  name: "community",
  data(){
    return{
      loading:false,
      communityData:[],
      postData:[],
      communityId:"1",
    }
  },
  methods:{
    initCommunity(){
      request.get("/article/initCommunity").then(res =>{
        this.communityData=res.data;
        for (let i = 0; i < res.data.length; i++) {
          this.communityData[i].communityId=res.data[i].communityId.toString()
        }
      })
    },
    articleTitle(articleId){
      gotoNewWindow(articleId,"content","detail");
    },
    setCommunityId(tab){
      this.communityId=tab.$options.propsData.name;
      this.getPostList();
    },
    getPostList(){
      this.loading=true;
      request.get('/article/getPostList/'+this.communityId).then(res =>{
        this.postData=res.data;
        if (this.postData.length !== 0){
          this.loading=false;
        }
      })
    }
  },
  mounted() {
    document.title="文章 - 贴乎";
    this.initCommunity()
    this.getPostList()
  }
}
</script>

<style scoped>
.communityDiv{
  height: auto;
  max-width: 600px;
  margin: 0 auto;
  margin-top: 10px;
}
.bar-topic{
  float: left;
  width: 69%;
}
.index-content-bar{
  height: 100%;
  margin-top: 10px;
  box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.titleDiv{
  display: -webkit-box;
  display: -moz-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
}
</style>